<template>

  <div class="main">
    <div class="dashboard content-wrap">
      <grid-layout
        :layout="layout"
        :col-num="48"
        :row-height="rowHeight"
        :is-draggable="false"
        :is-resizable="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
        v-if="show"
        :event-bus='eventBus'>
        <grid-item
          v-for="item in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          @resize="onResize"
          :event-bus='eventBus'>
          <component :is="item.component"></component>
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { GridLayout, GridItem } from 'components/view/layout/vue-grid-layout'
import Statistic from './components/Statistic'
import Ammeter from './components/Ammeter'
import WaterMeter from './components/WaterMeter'
import EntranceGuard from './components/EntranceGuard'
import BarrierGate from './components/BarrierGate'
import DeviceAlert from './components/DeviceAlert'
import FailureDistribution from './components/FailureDistribution'
import KeepWatch from './components/KeepWatch'
import KeepWatch1 from './components/KeepWatch1'
import MaintenanceOrder from './components/MaintenanceOrder'
import AirQuality from './components/AirQuality'
import ChartRing from './components/ChartRing'
import ChartRing1 from './components/ChartRing1'
import DoorControl from './components/DoorControl'

const layout = [
  {x: 0, y: 0, w: 24, h: 4, i: '0', component: 'Statistic'},
  {x: 24, y: 0, w: 5, h: 2, i: '1', component: 'Ammeter'},
  {x: 29, y: 0, w: 5, h: 2, i: '2', component: 'WaterMeter'},
  {x: 34, y: 0, w: 14, h: 4, i: '3', component: 'DeviceAlert'},
  {x: 24, y: 2, w: 5, h: 2, i: '4', component: 'EntranceGuard'},
  {x: 29, y: 2, w: 5, h: 2, i: '5', component: 'BarrierGate'},
  {x: 0, y: 4, w: 24, h: 4, i: '6', component: 'FailureDistribution'},
  {x: 24, y: 4, w: 10, h: 4, i: '7', component: 'ChartRing'},
  {x: 34, y: 4, w: 14, h: 4, i: '8', component: 'KeepWatch'},
  {x: 0, y: 8, w: 12, h: 4, i: '9', component: 'DoorControl'},
  {x: 12, y: 8, w: 12, h: 4, i: '10', component: 'MaintenanceOrder'},
  {x: 24, y: 8, w: 10, h: 4, i: '11', component: 'ChartRing1'},
  {x: 34, y: 8, w: 14, h: 4, i: '12', component: 'KeepWatch1'}
]

export default {
  name: 'Monitor',

  components: {
    DoorControl,
    ChartRing,
    ChartRing1,
    GridLayout,
    GridItem,
    Statistic,
    Ammeter,
    WaterMeter,
    EntranceGuard,
    BarrierGate,
    DeviceAlert,
    FailureDistribution,
    KeepWatch,
    KeepWatch1,
    MaintenanceOrder,
    AirQuality
  },

  data () {
    return {
      layout: layout,
      rowHeight: 30,
      show: false,
      eventBus: new Vue()
    }
  },

  mounted () {
    this.$nextTick(() => {
      let containerHeight = this.$el.clientHeight - 62
      this.rowHeight = (containerHeight - 130) / 12
      this.show = true
    })
  },

  methods: {
    /**
     * 处理栅格大小调整
     * @param {String} i 索引
     * @param {Number} newH 调整后的高度
     * @param {Number} newW 调整后的宽度
     */
    onResize (i, newH, newW) {
      console.log('Resize')
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/stylus/base'

.dashboard {
  absolute: left top;
  left: 0;
  size: 100%;
  padding-top: 62px;
  min-width: 800px;
  box-sizing: border-box;
  overflow: auto;
}
</style>
